<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="__STATIC__/css/style.css"/>
		<link rel="stylesheet" type="text/css" href="__STATIC__/css/correlation-moble.css"/>
		<script src="__STATIC__/js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="__STATIC__/js/mobile-util.js" type="text/javascript" charset="utf-8"></script>
		<script src="__STATIC__/js/layer.js"  type="text/javascript" ></script>
		<script src="__PUBLIC__/js/global.js" type="text/javascript"></script>
		<script src="__PUBLIC__/js/md5.min.js"></script>
	</head>
	<body>
		<div id="containe-view">
			<form id="form">
				<input type="hidden" name="auth_code" value="{$Think.config.AUTH_CODE}"/>
				<input id="sms_sms_time_out" type="hidden" value="{$tpshop_config['sms_sms_time_out']|default=60}"/>
				<input name="nickname" type="hidden" value="{$nickname}"/>
				<div class="correlation-head-wrap">
					<div class="correlation-header">
						<div class="correlation-header-cont">
							<i><a href=""></a></i>
							<h2>关联手机号</h2>
						</div>
					</div>
					<div class="container-yh-wrap">
						<div class="container-head">
				            <a href="#">
				                <img src="{$head_pic}" />
				            </a>
				        </div>
						<h3 class="container-yh-id">{$nickname}</h3>
				        <div class="container-yh-icon">
				           <i ></i>
				            <span>
								<if condition="$oauth eq 'weixin'"> 微信
									<elseif condition="$oauth eq 'qq'"/>
									QQ
									<else/>
									支付宝
								</if>
							</span>
				        </div>
					</div>
				</div>
				<div class="correlation-cont-wrap">
					<div class="correlation-cont">
						 <p class="container-alt">
				           	为了给你更好的服务，请关联一个{$tpshop_config['shop_info_store_name']}账号若还没有{$tpshop_config['shop_info_store_name']}账号，则注册后默认完成关联
				        </p>
				       <ul class="container-list content">
				            <li class="fl"><a href="#" class="bind">关联已有账号</a></li>
				            <li class="fl"><a href="#" class="reg">注册并关联账号</a></li>
				        </ul>
					</div>
				</div>
				<!--绑定模块-->
				<div class="correlation-input-wrap">
					<div class="items-warp">
		                <div class="item_cont ">
		                    <i><img src="__STATIC__/images/ptuser.png"></i>
		                    <div class="item-inputs">
		                        <span>手机号码</span><input name="mobile" type="text" id="mobile"  placeholder="请输入手机号码">
		                    </div>
		                </div>
						<div class="item_cont reg_div">
							<i><img src="__STATIC__/images/tppsw.png"></i>
							<div class="item-inputs">
								<span>设置密码</span><input maxlength="16" type="password" id="password" placeholder="由字母和数字组成的6-16位字符"/>
								<input name="password" type="hidden" value=""/>
							</div>
						</div>
		                <div class="item_cont ">
		                    <i><img src="__STATIC__/images/tpyanzhen.png"></i>
		                    <div class="item-inputs item-input-yz">
		                    <span>验&nbsp;证&nbsp;&nbsp;码</span> <input name="verify_code" id="verify_code" placeholder="请输入验证码">
			                </div>
			                <div class="tp-get-gode">
			                    <input type="button" class="correlation-get-gode" id="count_down" value="获取验证码">
			                </div>
		                </div>
		                <div class="item-cont cont15">
		                    <input type="button" class="correlation-submit submit" value="立即绑定">
		                </div>
						<div class="tp-chenboxs reg_div">
							<input type="checkbox" name="checkbox" value="checkbox"/>
							<label>我已阅读并同意</label>
							<a href="#">《商城用户注册协议》</a>
						</div>
		            </div>
				</div>
			</form>
		</div>
	</body>
	<script type="text/javascript">
		 $(".correlation-input-wrap .items-warp").eq(0).show(); //让绑定手机号的显示
		$(".correlation-cont .container-list li").eq(0).children("a").addClass("tp-list-bg");
		 $(".reg_div").hide();
         //手机号码绑定和手机号码绑定并注册切换
		$(".correlation-cont .container-list li").click(function  () {
			$(this).children("a").addClass("tp-list-bg");
			$(this).siblings("li").children("a").removeClass("tp-list-bg");
			if($(this).children("a").hasClass("bind")){
				$(".reg_div").hide();
			}else{
				$(".reg_div").show();
			}
		})
		 var intAs = $("input[id='sms_sms_time_out']").val();
		 // 发送手机短信
		 function send_sms_reg_code(){
			 var form = $('#form');
			 var mobile = form.find("input[name='mobile']").val();
			 if (!checkMobile(mobile)) {
				 layer.open({content: "请输入正确的手机号码", time: 2});
				 return;
			 }
			 var url = "/index.php?m=Home&c=Api&a=send_validate_code&scene=1&type=user_reg&mobile="+mobile;
			 $.ajax({
				 url: url,
				 dataType: "json",
				 success: function (data) {
					 if (data.status == 1) {
						 $('#count_down').attr("disabled", "disabled");
						 jsInnerTimeout('count_down', intAs);
						 layer.open({content: data.msg, time: 2});
					 } else {
						 layer.open({content: data.msg, time: 2});
					 }
				 }
			 });
		 }
		 function jsInnerTimeout(id, intAs) {
			 var codeObj = $("#" + id);
			 intAs--;
			 if (intAs <= -1) {
				 codeObj.removeAttr("disabled");
				 codeObj.attr("value","获取验证码");
				 return true;
			 }
			 codeObj.attr("value",intAs + '秒');
			 setTimeout("jsInnerTimeout('" + id + "'," + intAs + ")", 1000);
		 }
		 //绑定提交
		 function bind_submit() {
			 var form = $("#form");
			 var mobile = form.find("input[name='mobile']").val();
			 var verify_code = form.find("input[name='verify_code']").val();
			 //绑定账号
			 if (mobile == '') {
				 layer.open({content: "请输入手机号码", time: 2});
				 form.find("input[name='mobile']").focus();
				 return;
			 }
			 if (!checkMobile(mobile)) {
				 layer.open({content: "手机号码格式不正确", time: 2});
				 form.find("input[name='mobile']").focus();
				 return;
			 }
			 if (verify_code == '') {
				 layer.open({content: "请输入验证码", time: 2});
				 form.find("input[name='verify_code']").focus();
				 return;
			 }
			 $.ajax({
				 type: "POST",
				 url:"{:U('Mobile/User/bind_account')}",
				 data: {mobile: mobile,verify_code:verify_code},
				 dataType: "json",
				 success: function(data){
					 console.log(data);
					 if (data.status == 1) {
						 layer.open({content: data.msg, time: 2, end:function(){
							 window.location.href = "{:U('Mobile/User/index')}";
						 }});
					 } else {
						 layer.open({content: data.msg, time: 2});
					 }
				 }
			 });
		 }

		 //注册提交
		 function reg_submit(){
			 var form = $("#form");
			 if(form.find("input[name='mobile']").val() == ''){
				 layer.open({content: "请输入手机号码", time: 2});
				 form.find("input[name='mobile']").focus();
				 return;
			 }
			 if (!checkMobile(form.find("input[name='mobile']").val())) {
				 layer.open({content: "手机号码格式不正确", time: 2});
				 form.find("input[name='mobile']").focus();
				 return;
			 }
			 if(form.find("input[name='password']").val() == ''){
				 layer.open({content: "请输入密码", time: 2});
				 form.find("input[name='password']").focus();
				 return;
			 }
			 if(form.find("input[name='password']").val().length < 6){
				 layer.open({content: "密码要求6-16位字符，建议由字母、数字和符号两种以上组合", time: 2});
				 form.find("input[name='password']").focus();
				 return;
			 }
			 if(form.find("input[name='verify_code']").val() == ''){
				 layer.open({content: "请输入短信验证码", time: 2});
				 form.find("input[name='verify_code']").focus();
				 return;
			 }
			 if($('input:checkbox').is(':checked')){
				 $.ajax({
					 type: "POST",
					 url:"{:U('Mobile/User/bind_reg')}",
					 data: form.serialize(),
					 dataType: "json",
					 success: function(data){
						 console.log(data);
						 if (data.status == 1) {
							 layer.open({content: data.msg, time: 2, end:function(){
								 window.location.href = "{:U('Mobile/User/index')}";
							 }});
						 } else {
							 layer.open({content: data.msg, time: 2});
						 }
					 }
				 });
			 }else{
				 layer.open({content: "请阅读并同意注册协议", time: 2});
			 }
		 }

		 $(function () {
			 $(document).on("click", '.submit', function (e) {
				 var bind = $(".tp-list-bg").hasClass('bind');
				 if (bind) {
					 bind_submit();
				 }else{
					 reg_submit();
				 }
			 })
		 })
		 //发送验证码
		 $(function () {
			 $(document).on("click", '#count_down', function (e) {
				 var bind = $(".tp-list-bg").hasClass('bind');
				 if (bind) {
					 check_bind_mobile();
				 }else{
					 check_reg_mobile();
				 }
			 })
		 })

		 //检查要绑定的手机
		 function check_bind_mobile(){
			 var mobile = $("input[name='mobile']").val();
			 var form = $("#form");
			 if(mobile == ''){
				 layer.open({content: "请输入手机号码", time: 2});
				 form.find("input[name='mobile']").focus();
				 return;
			 }
			 if (!checkMobile(mobile)) {
				 layer.open({content: "手机号码格式不正确", time: 2});
				 form.find("input[name='mobile']").focus();
				 return;
			 }
			 $.ajax({
				 type: "POST",
				 url:"{:U('Home/Api/checkBindMobile')}",
				 data: {mobile: mobile},
				 dataType: "json",
				 success: function(data){
					 console.log(data);
					 if (data.status == 1) {
						 send_sms_reg_code();
					 } else {
						 layer.open({content: data.msg, time: 2});
					 }
				 }
			 });
		 }

		 function check_reg_mobile()
		 {
			 var mobile = $("input[name='mobile']").val();
			 var form = $("#form");
			 if(mobile == ''){
				 layer.open({content: "请输入手机号码", time: 2});
				 form.find("input[name='mobile']").focus();
				 return;
			 }
			 if (!checkMobile(mobile)) {
				 layer.open({content: "手机号码格式不正确", time: 2});
				 form.find("input[name='mobile']").focus();
				 return;
			 }
			 $.ajax({
				 type: "POST",
				 url:"{:U('Home/Api/checkRegMobile')}",
				 data: {mobile: mobile},
				 dataType: "json",
				 success: function(data){
					 if (data.status == 1) {
						 send_sms_reg_code();
					 } else {
						 layer.open({content: data.msg, time: 2});
					 }
				 }
			 });
		 }
		 $(document).on('keyup', '#password', function() {
			 var password = md5($("input[name='auth_code']").val() + this.value);
			 $('input[name="password"]').val(password);
		 })
	</script>
</html>
